<script>
	// 数据详情页
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'WeworkQrList'
	})
</script>
<script setup>
	import {
		multiStaffChoose
	} from '../lib/index'
	import * as echarts from 'echarts'
	import {
		dateTypes
	} from '@/utils'
	import {
		staffListData
	} from '@/data'
	import MyIcon from '@/components/my-icon/index.vue'
	import {
		ref,
		onMounted
	} from 'vue'
	import {postDataCustomerChart} from '@/api'

	const queryForm = ref({
		type: 1,
		date_type: 'day',
		staffs: []
	})
	const isRefresh = ref(true)
	const handleRefresh = () => {
		isRefresh.value = false
		isRefresh.value = true
	}
	const dialogVisible = ref(false)
	const staffData = ref([])
	const chooseStaff = () => {
		dialogVisible.value = true
		chooseDialogue.value.show('staff', staffData.value)
	}
	const getChooseData = (val) => {
		console.log(val, '数据回显')
		staffData.value = val
		reqQrChartData()
		handleRefresh()
	}
	const chooseDialogue = ref(null)

	const selfTime = ref([])
	const date_typeList = ref([])
	date_typeList.value = dateTypes
	const staffList = ref([])
	staffList.value = staffListData
const reqQrChartData = async() =>{
	if(selfTime.value[0]){
		queryForm.value.date_type='self'
	}
	if (selfTime.value){
		if (selfTime.value.length==2){
			queryForm.value.ktime = selfTime.value[0]
			queryForm.value.dtime = selfTime.value[1]
		}else{
			queryForm.value.ktime =''
			queryForm.value.dtime = ''
		}
	}else{
		queryForm.value.ktime =''
		queryForm.value.dtime = ''
	}
	if (staffData.value.length>0) {
		queryForm.value.staffs = []
		staffData.value.forEach(item=>{
			queryForm.value.staffs.push(item.id)
		})
	}
	const r = await postDataCustomerChart(queryForm.value)
	let xData = []
	let yData = []
	if(r){
    // tableData.value = r.data
		r.data.forEach(item=>{
      xData.push(item.time)
      yData.push(item.size)
		})
	}
	let myChart = echarts.init(document.getElementById('myChart123'))
	// 绘制图表
	myChart.setOption({
		xAxis: {
			data: xData
		},
    yAxis: {},
    tooltip: {
			trigger: 'axis',
		},
		series: [
			{
				name: queryForm.value.type==1?'客户总数':queryForm.value.type==2?'新增客户数':queryForm.value.type==3?'流失客户数':'净增客户数',
				type: 'line',
				data: yData,
				itemStyle: {
					borderRadius: [0, 5, 5, 0],
					color: '#1890ff'
				},
				lineStyle: {
					color: '#1890ff'
				}
				// areaStyle:{
				// 	color:'#1890ff',
				// },
			}
		]
	})
	window.onresize = function () {
		// 自适应大小
		myChart.resize()
	}
}

onMounted(() => {
	reqQrChartData()
})
</script>

<template>
	<div class="app-edit app-gap-block-top">
		<div class="app-container">
			<div class="table-title app-flex-left">
				趋势图
			</div>
			<div class="app-gap-block-top">
				<div>
					<el-radio-group @change="reqQrChartData" v-model="queryForm.type" size="large">
						<el-radio-button :label="1">客户总数</el-radio-button>
						<el-radio-button :label="2">新增客户数</el-radio-button>
						<el-radio-button :label="3">流失客户数</el-radio-button>
						<el-radio-button :label="4">净增客户数</el-radio-button>
					</el-radio-group>
				</div>
				<div class="app-gap-block-top app-flex-left">
					<el-select @change="reqQrChartData" v-model="queryForm.date_type" class="m-2" placeholder="请选择" size="large">
						<el-option v-for="(item, index) in date_typeList" :key="index" :label="item.title" :value="item.name" />
					</el-select>
					<span class="app-gap-words-left app-select-right">自定义：</span>
					<el-date-picker 
					value-format="YYYY-MM-DD"
							format="YYYY-MM-DD"
					@change="reqQrChartData" 
					class="app-date-picker" 
					v-model="selfTime" type="daterange" 
					range-separator="~"
						start-placeholder="开始日期" 
						end-placeholder="结束日期" size="large" />
					<span class="app-gap-words-left app-select-right">选择员工：</span>
					<span v-if="isRefresh">
						<span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-if="staffData.length>2">
							<span class="app-flex-left">
								<el-avatar v-if="staffData[0].avatar" class="cho-margin" shape="square" :size="30"
									:src="staffData[0].avatar" />
								<span>{{ staffData[0].name }}等{{staffData.length}}个账号</span>
							</span>
							<el-icon>
								<ArrowDown />
							</el-icon>
						</span>
						<span @click="chooseStaff" class="app-flex-2 app-choose-staff" v-else>
							<span class="app-flex-left" v-for="(item,index) in staffData" :key="index">
								<el-avatar v-if="item.avatar" class="cho-margin" shape="square" :size="30" :src="item.avatar" />
								<span>{{ item.name }}</span>
							</span>
							<span v-if="staffData.length==0"> </span>
							<el-icon>
								<ArrowDown />
							</el-icon>
						</span>
					</span>
				</div>
				<div class="app-gap-block-top">
					<div id="myChart123" :style="{ width: '100%', height: '550px' }"></div>
				</div>
			</div>
		</div>
		<div></div>
		<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
	</div>
</template>
<style lang="scss">
	@import url('../../../../style/app-component.scss');
	@import '../../../../style/mixin.scss';
</style>